/*
 * @Descripttion:
 * @Author: wangyigang
 * @Date: 2022-08-08 14:08:56
 * @LastEditors: wangyigang
 * @LastEditTime: 2022-08-12 10:35:59
 */
import React, { useState, useEffect, useCallback } from 'react';
import Link from 'next/link'
import axios  from 'axios';
import { Form ,Table } from 'antd';
import 'antd/dist/antd.css';
import { useRouter } from 'next/router'
import styles from '../styles/Home.module.css'

const dataSource = [
    {
      key: '1',
      name: '胡彦斌',
      age: 32,
      address: '西湖区湖底公园1号',
    },
    {
      key: '2',
      name: '胡彦祖',
      age: 42,
      address: '西湖区湖底公园1号',
    },
  ];
  
  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '住址',
      dataIndex: 'address',
      key: 'address',
    },
  ];

  export async function getStaticProps({params}) {
    const data = await axios.get('https://api.ptgcn.com/api/app/mallProducts?isPopular=true');
    return {
      props: { ...data.data}
    }
  }

function ExportList(props) {
    const {data} = props
    const router = useRouter()
    const [listData, setListData] = useState('1111');
    const [arrData, setArrData] = useState(data);
    const handleQuery = ()=>{
        router.push('about11')
        setListData('3333')
    }
    const handleQuery1=()=>{
        const timestamp = (new Date()).valueOf();
         router.push(`/dogs/id?pid=${timestamp}`)
    }
    const handleQuery2=()=>{
        const timestamp = (new Date()).valueOf();
         router.push(`/dogs/array/a/b/c?pid=${timestamp}`)
    }
    return (
        <div className={styles.main}>
            <Table dataSource={dataSource} columns={columns} />;
            <h2>{listData}</h2>
            <h1 onClick={handleQuery}>路由跳转</h1>
            <h2 onClick={handleQuery1}>动态路由跳转</h2>
            <Link href="/dogs/id?pid=abc">
          <a>Go to pages/dogs/[id].js</a>
        </Link>
        <h2 onClick={handleQuery2}>...捕获所有路径</h2>
        {data.map(item=>{
            return <h1 key={item.sku}>{item.productName}</h1>
        })}
        </div>
    );
}

export default ExportList;
